<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            let data = {
                name:'张三',
                address:'北京'
            }
            // 创建一个监视的实例对象，用于监视data中属性的变化
            let obs = new Observer(data);
            console.log(obs);
            // 准备一个vm实例对象
            let vm = {};
            vm._data = data = obs;

            function Observer(obj){
                // 汇总对象中所有的属性形成一个数组
                let keys = Object.keys(obj);//['name', 'address']
                // 遍历
                keys.forEach((item)=>{
                    // item   是   name , address
                    Object.defineProperty(this,item,{
                        get(){
                            return obj[item]
                        },
                        set(val){
                            console.log(`${item}被改了，我要去解析模板，生成虚拟DOM。。。`)
                            obj[item] = val;
                        }
                    })
                })
            }
        </script>
    </body>
</html>